<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <style>
      body {
        font-family: 'trebuchet ms', verdana, arial;
      }
    </style>
  </head>
  <body>
    <pre class="mermaid">
      graph TB
      subgraph One
        a1-->a2-->a3
      end
    </pre>
    <pre class="mermaid">
      graph TB
        a_a --> b_b:::apa --> c_c:::apa
        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
        class a_a apa;
    </pre>
    <pre class="mermaid">
      graph TB
        a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
        a_a --> c --> d_d --> c_c
        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
        class a_a apa;
        click a_a "http://www.aftonbladet.se" "apa"
    </pre>

    <script type="module">
      import mermaid from './mermaid.esm.mjs';

      mermaid.initialize({
        theme: 'forest',
        // themeCSS: '.node rect { fill: red; }',
        logLevel: 3,
        flowchart: { curve: 'linear' },
        gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50 },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
      });
    </script>
  </body>
</html>
